<template>
  <el-dialog 
    :visible.sync="dialogVisible"
    :show-close="false"
    append-to-body
    width="1000px"
    class="eldialog">
    <i class="close-btn el-icon-close" @click="handleClose"></i>
    <h5 class="title zh">
      <p v-html="info['achievement_name']"></p>
    </h5>
    <!-- 成果完成人 -->
    <p class="contrib-full-name">{{info['contrib_full_name']}}</p>
    <!-- 第一完成单位 -->
    <p class="achievement-institution">{{info['achievement_institution']}}</p>
    <dl>
      <dd>
        <span class="tit">【关键词】</span>
        <span class="cont">{{info['keywords']}}</span>
      </dd>
      <dd class="long130">
        <span class="tit">【中图分类号】</span>
        <span class="cont">{{info['clc1']}}</span>
      </dd>
      <dd class="long130">
        <span class="tit">【学科分类号】</span>
        <span class="cont">{{info['clc2']}}</span>
      </dd>
      <dd>
        <span class="tit">【成果简介】</span>
        <span class="cont">{{info['achievement_profile']}}</span>
      </dd>
      <dd>
        <span class="tit">【成果类别】</span>
        <span class="cont">{{info['achievement_type']}}</span>
      </dd>
      <dd>
        <span class="tit">【成果水平】</span>
        <span class="cont">{{info['achievement_level']}}</span>
      </dd>
      <dd class="long130">
        <span class="tit">【研究起止时间】</span>
        <span class="cont">{{info['research_date']}}</span>
      </dd>
      <dd>
        <span class="tit">【评价形式】</span>
        <span class="cont">{{info['assess_format']}}</span>
      </dd>
      <dd>
        <span class="tit">【入库时间】</span>
        <span class="cont">{{info['registered_date']}}</span>
      </dd>
    </dl>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      info: {}
    }
  },
  methods: {
    init(data) {
      this.$get(this.$Url.IR.achievementGetById, {
        id: data.id
      }).then(res => {
        let data = res.data
        let info = JSON.parse(JSON.stringify(data))
        // 关键词
        if (info.keywords && info.keywords.length > 0) {
          info.keywords = info.keywords.join('，')
        } else {
          info.keywords = ''
        }
        // 成果完成人
        if (info.contrib_full_name && info.contrib_full_name.length > 0) {
          info.contrib_full_name = info.contrib_full_name.join('，')
        } else {
          info.contrib_full_name = ''
        }
        this.info = info
        this.$nextTick(() => {
          this.dialogVisible = true
        })
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
  },

}
</script>

<style lang="scss" scoped>
.eldialog {
  ::v-deep {
    .el-dialog__header {
      height: 0;
      padding-top: .1rem;
      padding-bottom: .1rem;
      // padding-top: 0;
      // padding-bottom: 0;
      text-align: center;
      background-color: $color79;
    }
    .el-dialog__body {
      padding: 0 .4rem .4rem;
      background-color: $color79;
    }
  }
  .title {
    width: 100%;
    line-height: .24rem;
    padding: .1rem 0;
    border-bottom: 0;
    text-align: center;
    font-size: .18rem;
    &.zh {
      line-height: .3rem;
      p, span {
        display: inline-block;
        margin-right: .1rem;
        vertical-align: middle;
      }
      span {
        height: .16rem;
        line-height: .16rem;
        padding: 0 .06rem;
        border-radius: 6px;
        text-align: center;
        font-size: .12rem;
        color: $color2;
        background-color: $mainColor;
        &.imp {
          background-color: $mainColor;
        }
        &.abolish {
          background-color: $color78;
        }
      }
    }
  }
  .contrib-full-name, .achievement-institution {
    width: 100%;
    line-height: .24rem;
    padding: .1rem 0;
    border-bottom: 0;
    text-align: center;
    font-size: .16rem;
    color: $color80;
  }
  .achievement-institution {
    margin-bottom: .1rem;
  }
  dl {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    dd {
      position: relative;
      display: flex;
      width: 100%;
      line-height: .3rem;
      padding-right: .1rem;
      margin-bottom: .1rem;
      box-sizing: border-box;
      font-size: .16rem;
      color: $color5;
      &.xs6 {
        width: 50%;
      }
      &.long130 {
        .tit {
          width: 1.3rem;
        }
        .cont {
          width: calc(100% - 1.3rem);
        }
      }
      &.long150 {
        .tit {
          width: 1.5rem;
        }
        .cont {
          width: calc(100% - 1.5rem);
        }
      }
      .tit {
        width: 1rem;
        margin-right: .1rem;
      }
      .cont {
        width: calc(100% - 1rem);
      }
    }
  }
}
.close-btn {
  position: absolute;
  top: .2rem;
  right: .2rem;
  z-index: 2;
  display: block;
  width: .3rem;
  height: .3rem;
  line-height: .4rem;
  text-align: center;
  font-size: .18rem;
  color: $color92;
  cursor: pointer;
}
</style>